<template>
  <div>

    <template v-for="navMenu in navMenus">
        <!-- 最后一级菜单 -->
        <el-menu-item v-if="navMenu.sub_menu.length == 0" :key="navMenu.menu_id" :data="navMenu" :index="navMenu.menu_id"  :data-abc="navMenu.url | cutDot"  @click="showInfo"
                    >
        <!-- <i :class="navMenu.entity.icon"></i> -->
        <!-- <router-link :to="navMenu.url | cutDot" >{{navMenu.name}}</router-link> -->
        <router-link :to="navMenu.url | cutDot" >{{navMenu.name}}</router-link>
        </el-menu-item>

        <!-- 此菜单下还有子菜单 -->
        <el-submenu v-if="navMenu.sub_menu.length != 0" :key="navMenu.menu_id" :data="navMenu" :index="navMenu.menu_id">
          <template slot="title">
              <!-- <i :class="navMenu.entity.icon"></i> -->
              <span @click="aaa"> {{navMenu.name}}</span>
          </template>
        <!-- 递归 -->
          <NavMenu :navMenus="navMenu.sub_menu"  class="moreMuenu"></NavMenu>
        </el-submenu>

    </template>

  </div>

</template>


<script>

  export default {
    name: 'NavMenu',
    props: ['navMenus',"menuArray"],
    data(){
      var url = this.$route.path.split('/')[1];
      return{
        urlIndex:url,
        menuId:''
      }
    },
    methods:{
      aaa(e){
           
          $('.el-menu-item').removeClass('titleAc')
          $('.el-submenu__title').removeClass('titleAc')
          e.target.parentNode.className = 'el-submenu__title titleAc'
        },
      showInfo(){
        $('.el-submenu__title').removeClass('titleAc')
        var that = this;
        var url = that.$route.path.split('/')[1];
        $.each(that.menuArray,function (i,item) {
          if(item.url == url){
            that.menuId = item.menu_id;
            return
          }
        })
        this.$emit('getMenuId',that.menuId)
      }
    },
    created(){
      this.showInfo()
    }
}

</script>

<style lang="scss">
.titleAc{background:rgba(0,255,255,0.1)!important}
</style>
